<template>
  <div class="vote-wrapper">
    <div class="header" id="winners">获奖名单</div>
    <div class="line"></div>
    <div class="wrapper">
      <div class="tabs">
        <div class="tab" v-for="(item, index) in tabs" :key="index" :class="{'active': item === activeTab}" @click="changeTab(item)">{{item}}</div>
      </div>
      <div class="result-wrapper">
        <img class="items" :src="result"/>
        <div style="text-align: center;color: #805500;font-size: 14px;padding: 20px 0 30px;">*以上排名顺序不分先后</div>
      </div>
      <!-- <div class="group" v-for="group in voteList" :key="group.name">
        <div class="header">{{group.name}}</div>
        <vote-item v-for="(item, index) in group.items" :item="item" :key="item.name" :category="group.name" :isM="isM"></vote-item>
      </div> -->
    </div>
  </div>
</template>
<script>
  import VoteItem from './VoteItem.vue'
  import voteList from '../../vote.js'
  const tabs = []
  voteList.forEach(item => {
    tabs.push(item.name)
  })
  const isM = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  function findResult(type) {
    if (isM) {
      return voteList.find(item => item.name === type).m_result
    } else {
      return voteList.find(item => item.name === type).result
    }
  }
  export default {
    props: ['isM'],
    components: {
      VoteItem
    },
    data() {
      return {
        activeTab: '银行',
        result: findResult('银行'),
        tabs
      }
    },
    methods: {
      changeTab(val) {
        this.activeTab = val
      }
    },
    watch: {
      activeTab(val) {
        this.result = findResult(val)
      }
    }
  }
</script>

<style lang="scss" scoped>

  .vote-wrapper {
    padding: 40px 0px;
    background-color: #fff;
    .header {
      font-size: 30px;
      color: #000000;
      text-align: center;
    }
    .line {
      height: 2px;
      width: 270px;
      margin: 6px auto;
      background-image: linear-gradient(to right,#fff 0%,#9C8750 100%);
    }
    .tabs {
      width: 1001px;
      font-size: 20px;
      color: #666666;
      line-height: 21px;
      display: flex;
      .tab {
        cursor: pointer;
        text-align: center;
        background-color: #f0f2f5;
        padding: 30px 0px;
        flex-grow: 1;
        border-bottom: 1px solid #996C2E;
        &.active {
          background-color: #fff;
          color: #805500;
          border-top: 1px solid #996C2E;
          border-right: 1px solid #996C2E;
          border-left: 1px solid #996C2E;
          border-bottom: none;
        }
      }

    }
    .result-wrapper {
      width: 1000px;
      border-left: 1px solid #996C2E;
      border-bottom: 1px solid #996C2E;
      border-right: 1px solid #996C2E;
    }
    .items {
      width: 100%;
      display: block;
      // min-height: 560px;


      .group {
        .header {
          font-size: 20px;
          color: #805500;
        }
      }
    }
    .wrapper {
      width: 1000px;
      margin: 40px auto;
    }
  }
  @media screen and (max-width: 500px) {
    .vote-wrapper {
      padding-top: 30px;
      background-color: #FAFAFA;
      .header {
        padding-left: 12px;
        font-size: 17px;
        color: #0A0904;
      }
      .line {
        height: 2px;
        width: 205px;
      }
      .wrapper {
        margin-top: 28px;
        border-top: 1px solid#E6E6E6;
        width: 100%!important;
        margin-bottom: 0px;
        display: flex;
        .tabs {
          flex-shrink: 0;
          width: 75px;
          display: block;
          .tab {
            padding: 22px 0px;
            border: none!important;
            font-size: 15px;
            color: #808080;
            background-color: #F6F6F6;
            &.active {
              background-color: #FAFAFA;
              color: #996C2E;
            }
          }
        }
        .result-wrapper {
          border: 0;
        }
        .items {
          padding-top: 0px;
          flex-grow: 1;
          border: none;
          .group {
            .header {
              margin-top: 30px;
              text-align: left;
              font-size: 14px;
              color: #333333;
              font-weight: bold;
            }
          }
          .item {
            width: 50%;
          }
        }
      }
    }
  }
</style>

